//css reset
html,body,ul,li,h1,h2,h3,h4,span,div,p,a,form,input{margin: 0;padding: 0;font-family: helvetica;}
html,body{height: 100%;overflow: hidden;}
ul{list-style: none;}
a{text-decoration: none;display: block}
a,input,button{-webkit-tab-highlight-color: rgba(0,0,0,0);
                -webkit-appearance: none;outline: none;border: none;}
img{display: block}


//1rem值伪多少位图像素
@rem:1080/16rem;
@import "mixin/1-px";
@import "component/carousel";
@import "component/nav";
@import "extend/clearfix.less";
 #wrap{
        position: relative;
        font-size: 16/@rem;
        height: 100%;
        overflow: hidden;
        background: #EEEEEE;
        .head{
            position: absolute;
            width: 100%;
            background: #232323;
            z-index: 8;
            .head-top{
                height:135/@rem;
                .logo {
                    float: left;
                    padding: 26/@rem 17/@rem 21/@rem 17/@rem;
                    img{
                        width:240/@rem;
                    }
                }
                .menuBtn{
                    float: left;
                    width: 129/@rem;
                    height: 135/@rem;
                    background: url(../img/menuBtn.png) no-repeat;
                    background-size:82/@rem 233/@rem ;
                    background-position: center 16/@rem;
                    &.active{
                        background-position: center -120/@rem;
                    }
                }
                .btns{
                    padding-top:21/@rem ;
                    float: right;
                    a{
                        float: left;
                        width: 111/@rem;
                        height: 78/@rem;
                        line-height: 78/@rem;
                       /* background: #52e2c0;*/
                        /*box-sizing: border-box;
                        border: 1px solid #52e2c0;*/
                        color: #ccc;
                        margin-right:15/@rem;
                        font-size: 42/@rem;
                        text-align: center;
                        border-radius:8/@rem ;
                      &:hover{
                        color: #52e2c0;
                        background: rgba(82,226,192,.4);
                      }
                        &.search{
                            width: 130/@rem;
                            height: 88/@rem;
                            line-height: 88/@rem;
                            color: #fff;
                            margin-right: 30/@rem;
                            margin-top: 3/@rem;
                            font-weight: bold;
                            border-radius: 10/@rem;
                        }
                    }

                }
            }
            .head-bottom{
                height: 103/@rem;
                padding: 16/@rem;
                form{
                    height: 100%;
                    input[type='text']{
                        float: left;
                        box-sizing: border-box;
                        height: 103/@rem;
                        width: 829/@rem;
                        background: #999999;
                        padding: 5/@rem 10/@rem;
                        border: 1px solid #5a5a5a;
                        font-size: 41/@rem;
                        color: #333333;
                        border-radius: 15/@rem 0 0 15/@rem;
                        &::-webkit-input-placeholder{
                            color: #333333;
                        }
                        &:focus{
                            background: white;
                            box-shadow: -1px -1px 5px #52e2c0,1px -1px 5px #52e2c0,-1px 1px 5px #52e2c0,1px 1px 5px #52e2c0;
                            transform: scale(1.01);
                        }
                    }
                    input[type='submit']{
                        float: right;
                        width: 203/@rem;
                        height: 103/@rem;
                        background: #414040;
                        color: #fff;
                        font-size: 41/@rem;
                        border-radius:0 15/@rem 15/@rem 0 ;
                      &:hover{
                        color: #52e2c0;
                        background: rgba(82,226,192,.4);
                      }
                    }
                }
            }
            .mask{
                .1-px(top,#666);
                position: absolute;
                z-index: 2;
                left: 0;
                top: 135/@rem;
                width: 100%;
                padding: 10/@rem 0;
                background: rgba(0, 0, 0, .8);
                display: none;
                & > li{
                    width: 22.5%;
                    height: 135/@rem;
                    font-size: 45/@rem;
                    line-height: 135/@rem;
                    text-align: center;
                    float: left;
                    a{
                        color: white;
                    }
                }
            }
        }
        .content{
            background: #EEEEEE;
            position: absolute;
            top: 270/@rem;
            bottom: 0;
            left: 0;
            right: 0;
            .tab-wrap{
                overflow: hidden;
                width: 1046/@rem;
                background: #FFFFFF;
                margin:0 auto;
                .tab-head{
                    height: 135/@rem;
                    line-height: 135/@rem;
                    h2{
                        float: left;
                        font-size: .7rem;
                    }
                    span{
                        float: right;
                        font-size: .6rem;
                    }
                }
                .tab-nav{
                    position: relative;
                    height: 105/@rem;
                    line-height: 105/@rem;
                    a{
                        float: left;
                        height: 105/@rem;
                        margin-right: 20/@rem;
                        //width: 120/@rem;
                        font-size: 44/@rem;
                        text-align: center;
                        color: #6b6b6b;
                    }
                    .smallG{
                        position: absolute;
                        left: 0;
                        bottom: 10/@rem;
                        //width: 120/@rem;
                        height: 9/@rem;
                        background: #52e2c0;
                        transition:1s transform,1s width;
                    }
                }
                .tab-content{
                    &:extend(.clearfix all);
                    width: 300%;
                    ul{
                        &:extend(.clearfix all);
                        float: left;
                        width: 33.3333%;
                        li{
                            box-sizing: border-box;
                            width: 506/@rem;
                            margin: 8/@rem;
                            padding: 5/@rem;
                            font-size: 40/@rem;
                            background: #efefef;
                            color: #000000;
                            overflow: hidden;
                            float: left;
                            height: 411/@rem;
                            &:hover{
                              box-shadow: -.5px -.5px 3px #52e2c0,.5px -.5px 3px #52e2c0,-.5px .5px 3px #52e2c0,.5px .5px 3px #52e2c0;
                              transform: scale(1.01);
                            }
                            a{
                                img{
                                    width: 100%;
                                }
                                span{
                                    padding-left: .2rem;
                                    padding-top: .1rem;
                                    display: block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    color: #222;
                                }
                                sub{
                                    color: #666;
                                    padding-left: .2rem;
                                }
                            }
                            .tab-discuss{
                                padding-top: .2rem;
                                padding-left: .2rem;
                                height: .6rem;
                                font-size: 30/@rem;
                                color:#666;
                                .right{
                                    float: left;
                                    margin-right: 30/@rem;
                                    vertical-align: middle;
                                    span:nth-child(1){
                                        display: inline-block;
                                        width: .7rem;
                                        height: .6rem;
                                        background: url(../img/ice.png) no-repeat 0 0.18rem;
                                    }
                                }
                                .left{
                                    float: left;
                                    vertical-align: middle;
                                    span:nth-child(1){
                                        display: inline-block;
                                        width: .7rem;
                                        height:.6rem;
                                        background: url(../img/ice.png) no-repeat;
                                        background-position: 0 -0.57rem;
                                    }
                                }
                            }
                        }
                    }
                    & .tab-loading{
                        background: url(../img/loading.gif) no-repeat center;
                        height: 10rem;
                        opacity: 0;
                    }
                }
            }
        }
        .scrollBar{
            position: absolute;
            right: 0;
            top: 0;
            width: 4px;
            height: 100%;
            background: rgba(0,0,0,.4);
            z-index: 9;
            transition:1s opacity;
            opacity: 0;
        }
    }